<template>
  <div class="page-con">
    <!--    <a-row class="grid-demo">-->
    <!--      <a-button type="primary" @click="ntko.createDoc">新建文档</a-button>-->
    <!--    </a-row>-->
    <a-row class="grid-demo">
      <a-col :span="4">
        <a-select v-model="docUrl" class="my-select">
          <a-option
            v-for="(item, index) in docList"
            :key="index"
            :value="item.value"
            >{{ item.label }}</a-option
          >
        </a-select>
      </a-col>
      <a-col :span="4">
        <a-input v-model="insertText" placeholder="向光标处添加内容" />
      </a-col>
    </a-row>
    <a-row class="grid-demo">
      <a-button :disabled="!docUrl" type="primary" @click="readDocHandle"
        >查看文档</a-button
      >
      <a-button :disabled="!docUrl" type="primary" @click="editDocHandle"
        >编辑文档</a-button
      >
      <a-button :disabled="!docUrl" type="primary" @click="addBookMarkHandle"
        >添加书签</a-button
      >
      <a-button :disabled="!docUrl" type="primary" @click="createContract"
        >生成正文</a-button
      >
      <a-button :disabled="!docId" type="primary" @click="closeDocHandle"
        >关闭文档</a-button
      >
      <a-button :disabled="!docId" type="primary" @click="insertDocHandle"
        >插入内容</a-button
      >
    </a-row>
  </div>
</template>

<script setup lang="ts">
  import ntko from '@/common/service/ntko/index';
  import { ref } from 'vue';
  import { info } from '@/common/utils/modal-promise';

  const docUrl = ref('');
  let baseUrl = '/ntko';

  if (import.meta.env.MODE === 'development') {
    baseUrl = 'http://procurement.internal.avicnet.cn:32101/ntko';
    // baseUrl = 'http://localhost:9100';
  }
  const docList = [
    {
      label:
        '采购商务合同模板-综合类（工具、办公家具、工位器具类）（2020-A版）',
      value: `${baseUrl}/doc/a.doc`,
    },
    { label: '技术服务合同.doc', value: `${baseUrl}/doc/b.doc` },
    {
      label: '仓储及物流服务合同（2020-A版）',
      value: `${baseUrl}/doc/c.docx`,
    },
    {
      label: '采购合同（车辆备件类）（2020-A版）.doc',
      value: `${baseUrl}/doc/d.doc`,
    },
    {
      label: '采购合同（设备备件类）（2020-A版）.doc',
      value: `${baseUrl}/doc/e.doc`,
    },
    {
      label:
        '采购商务合同模板-综合类（货架产品机电、办公用品类）（2020-A版）.doc',
      value: `${baseUrl}/doc/f.doc`,
    },
  ];
  const docId = ref('');
  const insertText = ref('我想吃麻辣烫');

  const readDocHandle = async () => {
    docId.value = await ntko.readDoc(docUrl.value);
  };

  const editDocHandle = async () => {
    docId.value = await ntko.editDoc(docUrl.value, {
      secretLevel: '1',
      dataId: '123', // 数据id，用于save之后，确认是哪一条数据
    });
  };

  const closeDocHandle = () => {
    ntko.closeDoc(docId.value);
  };

  const insertDocHandle = () => {
    ntko.insert(docId.value, insertText.value);
  };

  const addBookMarkHandle = () => {
    ntko.addBookmarkDoc(docUrl.value, {
      secretLevel: '1',
      dataId: '123', // 数据id，用于save之后，确认是哪一条数据
    });
  };

  const createContract = () => {
    ntko.createContractDoc(docUrl.value, {
      secretLevel: '1',
      mId: '1793883467916439553', // 主数据id
      bizType: '3', // 类型： 1-合同；2-合同变更；3-订单；4-订单变更
      dataId: '123', // 数据id，用于save之后，确认是哪一条数据
    });
  };

  // 监听文档保存成功了
  ntko.on('save', (res) => {
    info({
      title: `id为【${res.dataId}】的数据保存成功`,
      content: res.data,
    });
  });

  // 监听文档保存成功了
  ntko.on('close', () => {
    info({
      title: '页面关闭了',
      content: '编辑器关闭了',
    });
  });
</script>

<style lang="less" scoped>
  .page-con {
    padding: 20px;
    background-color: #ffffff;
  }
  .grid-demo {
    .arco-col {
      padding-right: 10px;
    }
    > button {
      margin-right: 10px;
    }
  }
</style>
